<%= include ic/header.html %>
<style>
#nav_home{color:#fff}
body{background:#f7f7f7;}
#main{text-align:center;}
footer{height:160px;background:#fff;line-height:160px;color:#111;}

#content{width:100%;margin:0;}



.title{width:100%;text-align:left;margin-top:20px;font-size:2rem;font-weight:800;padding-left:20px;}
.imgList{width:100%;padding:0;list-style-type:none;}
.imgList>li{overflow:hidden;border:none;cursor:pointer;position:relative;font-weight:600;font-family:Arial,Verdana,Sans-serif;}
.imgList>li img{width:auto;height:auto;}
.imgList .selectBar{width:100%;height:4rem;background:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;line-height:4rem;font-size:2.2rem;text-align:right;visibility:hidden;}
.imgList .selectBar span{float:right;margin:0 10px;color:#fff;}
.imgList .selectBar span.title{position:absolute;text-align:left;left:0;top:0;width:80%;height:100%;overflow:hidden;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;font-size:1.6rem;padding-left:0;font-weight:600;}
.imgList>li.hover .selectBar{visibility:visible;}

.imgList .titleBar{width:100%;position:absolute;left:0;}
.imgList .titleBar .title1{width:auto;margin:auto;clear:both;
  font-size:4rem;border-bottom:1px solid #fff;padding-bottom:5px;
  overflow:hidden;position:relative;color:#fff;}
.imgList .titleBar .title2{padding-top:5px;position:relative;color:#fff;}
.imgList .titleBar a:hover{color:#fff;}
</style>
<div id="main">
  <div id="content">
  <% for(var i=0;i<results.length;i++){ %>
  <% if(results[i].item.length>1){ %>
  <ul class="imgList am-avg-sm-3 am-cf" type="<%= results[i].type %>">
    <% for(var j=0;j<results[i].item.length;j++){ %>
    <li onclick="gotoUrl('/<%= results[i].type %>/detail?id=<%= results[i].item[j].id %>')" id="<%= results[i].item[j].id %>" >
      <img src="/p?id=<%= results[i].item[j].image %>&w=600" onload="fixImg()" >
      <div class="selectBar">
        <span class="clicks"><i class="am-icon-eye"></i> <font>0</font></span>
        <span class="title"><%= results[i].item[j].title %></span>
      </div>
    </li>
    <% } %>
  </ul>
  <div class="am-cf"></div>
  <% }else{ %>
    <ul class="imgList am-avg-sm-1 am-cf" type="<%= results[i].type %>">
      <li onclick="gotoUrl('/<%= results[i].type %>/detail?id=<%= results[i].item[0].id %>')" id="<%= results[i].item[0].id %>" >
        <img src="/p?id=<%= results[i].item[0].image %>&w=600" onload="fixImg()" >
        <div class="titleBar">
          <a class="title1"><%= results[i].title %></a><br/>
          <a class="title2"><%= results[i].item[0].title %></a>
        </div>
      </li>
    </ul>
  <% } %>
  <% } %>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  $(window).resize(function(){
    fixImg();
  });
  $(".imgList li").hover(function(){$(this).addClass("hover");},
  function(){$(this).removeClass("hover");});

  $("#content ul").map(function(){
    var type  = $(this).attr("type");
    var idArr = $(this).children("li").map(function(){
      //console.log($(this));
      return $(this).attr("id");
    }).get();
    getClicks(idArr,type);
  });
});

function fixImg(){
  $("#content .am-avg-sm-1 li").height($("#content .am-avg-sm-1 li").first().width()*0.417);
  $("#content .am-avg-sm-1 li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").height()/$(this).children("img").width()<0.417){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
    var h = $(this).children(".titleBar").height();
    $(this).children(".titleBar").css("top",($(this).innerHeight()-h)/2+"px");
  });

  $("#content .am-avg-sm-3 li").height($("#content .am-avg-sm-3 li").first().width()*0.67);
  $("#content .am-avg-sm-3 li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").height()/$(this).children("img").width()<0.67){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}

function getClicks(ids,type){
  //console.dir(ids);
  $.post("/getclicks", {
    "ajax"		: true,
    "type"		: type,
    "ids"     : ids
  },function(data){
    console.dir(data);
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      var results=data.results;
      for(var i=0;i<results.length;i++){
        $("#"+results[i].objectId+" font").text(results[i].clicks);
      }
    }
  });
}
</script>
